.m-demo {
  // @each $num 
  @for $i from 1 through 10 {
    .h-#{$i}00 {
      height: $i * 100 + px;
    }
  }
  .grid-center {
    display: grid;
    place-items: center;
  }
}
.m-layout--demo {
  .el-header,
  .el-footer {
    @extend.grid-center;
    background-color: #b3c0d1;
  }
  .el-aside {
    @extend.grid-center;
    background-color: #d3dce6;
  }
  .el-main {
    @extend.grid-center;
    background-color: #e9eef3;
  }
}
.m-layout--example {
  .el-divider--vertical {
    margin: 0 8px;
  }
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar:hover {
  width: 10px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: #0000004d;
}
